<template>
    <div class="wrap">
        <title-header>
            <div slot="left" class="title-left">
                <img src="@/assets/img/hot-title-icon.png" alt="">
                <span>热门兑换</span>
            </div>
            <div slot="right" class="title-right" @click="toGoodsPage">
                <span>更多</span>
                <img src="@/assets/img/left-more.png" alt="">
            </div>
        </title-header>

        <div class="adv">
            <img src="@/assets/img/banner.4c6b6225.png" alt="">
        </div>

        <goods-list :goodsData="hotList" />
    </div>
</template>

<script>
    import titleHeader from '@/components/common/title-header'
    import goodsList from '@/components/common/goods-list'
    export default {
        name: '',
        components: {
            titleHeader,
            goodsList
        },
        props: ['hotList'],
        data() {
            return {

            };
        },
         methods:{
            toGoodsPage(){
                this.$router.push({path: '/goods',query:{ did: 2 }})
            }
        } 
    }
</script>

<style scoped lang="less">
    .wrap {

        .title-left {
            height: 40px;
            display: flex;
            align-items: center;
            cursor: pointer;

            img {
                width: 40px;
            }

            span {
                margin-left: 10px;
                font-size: 30px;
                font-family: SourceHanSansSC;
                font-weight: bold;
                color: #242B39;
                cursor: pointer;
            }
        }

        .title-right {
            height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;

            span {
                margin-right: 6px;
                font-size: 16px;
                font-family: SourceHanSansSC;
                font-weight: 300;
                color: #666666;

            }

            img {
                width: 14px;
            }


        }

        .adv {
            height: 180px;
            background: #FFB089;
            margin-bottom: 30px;
        }
    }
</style>